<template>
	<div class="hore-edit">
		<h3>编辑英雄</h3>
		<hr />
			<div class="form-group">
				<label class="col-sm-2 control-label" >英雄名称</label>
				<div class="col-sm-10">
					<input  v-model="form.name" type="text" class="form-control" style="width:200px" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">英雄性别</label>
				<div class="col-sm-10">
					<input  type="radio" value="男" v-model="form.gender"/> 男
					<input  type="radio" value="女" v-model="form.gender"/> 女
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button class="btn btn-primary" @click="update">保存</button>
				</div>
			</div>
	</div>
</template>

<script>
import Axios from 'axios'
export default {
  data(){
    return {
      form:{
        name:'',
        gender:'' // 性格
      }
    }
  },
  methods:{
    getDetail(){
      let id  = this.$route.query.id
      // 获取英雄信息
      Axios.get(`http://localhost:6005/heroList/${id}`).then(res=>{
        console.log(res)
        // res.data
        this.form.name = res.data.name
        this.form.gender = res.data.gender
      })
    },
    update(){
      let id  = this.$route.query.id
      Axios.put(`http://localhost:6005/heroList/${id}`,{
        gender:this.form.gender,
        name:this.form.name,
        time:new Date()
      }).then(res=>{
        // 跳转到herolist
        this.$router.push({
          path:'/heroList'
        })
      })
    }
  },
  mounted(){
    this.getDetail()
  }
}
</script>

<style scoped>

</style>